﻿@import "Common.less";


.top-right-nav {
    float: right;
    margin-right: 10px;
    font-size: 13px;
    font-weight: bold;
}
.top-right-info {
    float: right;
    margin-right: 10px;
    font-size: 13px;
}

/* SQL Single Instance View */
.summary-dashboard {
    width: 1024px;
    padding: 5px 0 0 0;
    margin: 0 auto;
    &.with-left-toolbar {
        width: 1300px;
    }
    .link-row {
        text-align: center;
        padding-bottom: 5px;
    }
    .section-label-row td {
        text-align: center;
        font-weight: bold;
        padding: 5px 0;
        background-color: white !important;
        border-bottom: solid 1px #DDD;
    }
    .dashboard-description {
        padding: 5px;
        border-bottom: solid 1px #eee;
        color: maroon;
        margin-bottom: 5px;
    }
    .left-col, .right-col {
        width: 510px;
        display: inline-block;
        vertical-align: top;
    }
    table {
        width: 100%;
    }
    .summary-section-header {
        text-align: center;
        padding: 4px 0 2px 0;
        margin-bottom: 2px;
        font-weight: bold;
        color: #444;
        border-bottom: solid 1px #eee;

        &.no-line {
            border-bottom: none;
        }
    }
    .section-wrap {
        border: solid 1px #e6e6e6;
        border-radius: 5px;
        padding: 4px;
        margin-bottom: 5px;
    }
    .half-wrap {
        width: 238px;
        display: inline-block;
    }
    .third-wrap {
        width: 154px;
        display: inline-block;
    }
    .icon {
        vertical-align: text-bottom;
        &.status-icon {
            vertical-align: inherit;
        }
    }
    .cpu-graph {
        vertical-align: text-bottom;
    }
    .memory-bar .space-used {
        height: 5px;
        width: 100%;
    }
    .volume {
        color: #666;

        .volume-label {
            color: #444;
            font-weight: bold;
            padding-left: 6px;
        }
        .volume-usage {
            padding-top: 4px;
            font-size: 0.9em;
        }
        .volume-usage, .volume-bar {
            clear: both;
            text-align: center;
        }
        .volume-bar .space-used {
            height: 5px;
            margin-left: auto;
            margin-right: auto;
        }
    }    
    .cluster-info {
        padding: 4px;
        .cluster-members {
            text-align: center;
            padding: 6px 4px;
        }
    }
    .availability-group {
        background: #fff;
        -moz-transition: background .4s ease-in-out .2s;
        -webkit-transition: background .4s ease-in-out .2s;
        -o-transition: background .4s ease-in-out .2s;
        transition: background .4s ease-in-out .2s;
        
        .expander {
            display: none;
        }
        &.collapsed {
            &:hover {
                background: #f4f4f4;
                .expander {
                    opacity: 0.5;
                }
            }
            .expander {
                display: inline;
            }
            .availability-group-databases, .availability-group-nodes, .availability-group-listeners {
                display: none;
            }
        }
    }
    .availability-group-header {
        color: #666;
        font-weight: bold;
    }
    .availability-group-databases, .availability-group .expander {
        float: right;
        padding-right: 2px;
    }
    .availability-group-databases .icon {
        vertical-align: top;
    }
    .availability-group-nodes {
        clear: both;
        padding: 2px;
    }
    .availability-group-node {
        line-height: 21px;

        &.current span a {
            font-weight: bold;
        }
        .icon.master {
            margin-left: 18px;
        }
        .icon.slave {
            margin-left: 36px;
        }
    } 
    .availability-group-listeners {
        padding: 2px;
    }
    .expander {
        cursor: pointer;
        opacity: 0;
        -moz-transition: opacity .4s ease-in-out;
        -webkit-transition: opacity .4s ease-in-out;
        -o-transition: opacity .4s ease-in-out;
        transition: opacity .4s ease-in-out;
    }
    .network-range {
        font-weight: bold;
        color: #666;
        line-height: 18px;
    }
    .listener {
        &.Online {
            color: #009900;
        }
        &.Offline {
            color: #666;
        }
    }
    & > div table {
        margin-bottom: 10px;

        & > tbody > tr {
            & > td {
                line-height: 22px;
                padding: 0 4px;

                &:first-child {
                    color: #444;
                    width: 250px;
                }
            }
            &:nth-of-type(odd) > td {
                background: #f2f2f2;
            }       
        }
        & > thead > tr > th, & > tbody > tr > th {
            line-height: 22px;
            padding: 0 4px;
            color: #444;
            font-weight: bold;
        }
    }    
}
.summary-popup .summary-dashboard > div table > tbody > tr > td:first-child {
    width: auto;
}

/* SQL Server Query Display */
.sql-server {    
    padding: 4px;
    
    tr td, tr th {
        padding: 1px 4px;
    }
	.plan-row {
        &.selected td {
            border-top: solid 1px @red;
            border-bottom: solid 1px @red;
        }
        td {
		    cursor: pointer;
        }
	}
    &  > table {
        width: 100%;

		th.number-col {
			text-align: center;
		}

        & > tbody > tr {
            border-bottom: solid 1px #efefef;

            & > td {
                vertical-align: top;
                padding: 3px 5px;
            }
            &:nth-child(odd) > td {
                background-color: #fbfbfb;
            }
			&.plan-row:nth-child(odd) td {
				background-color: #f2f2f2;
			}
			td.number-col {
				text-align: right;
			}
			td.query-col {
				font-family: Consolas, Courier New;
			}
        }
    }
    .none-active {
        color: #999;
        text-align: center;
    }
    .sql-block-wrap  {
        max-height: 100px;
        //max-width: 800px;
        //background-color: #F4F4F4;
        overflow: auto;
    }
    .sql-block {
        min-width: 500px;
        max-height: 300px;
        font-family: Consolas;
    }
	&.sql-error {
		padding: 5px;
		color: @red;
	}
}
.cluster-dashboard {
    width: 960px;
    .quorum-info, .cluster-info {
        color: #888;
        font-size: 0.8em;
    }
    .tables-row {
        &:nth-child(odd) > td {
            background-color: white;
        }
        & > td.loading {
            height: 20px;
        }
        .sql-tables {
            background-color: white;
        }
    }   
    &#databases-table tr, &#database-table tr{
        th, td {
            cursor:pointer;
        }
    }
}

.node-selector {
    .instance {
        display: block;
        padding: 2px 4px;
        border: solid 1px #f4f4f4;
        border-radius: 5px;
        width: 300px;
        margin: 2px auto;
                
        -moz-transition: border-color .4s ease-in-out;
        -webkit-transition: border-color .4s ease-in-out;
        -o-transition: border-color .4s ease-in-out;
        transition: border-color .4s ease-in-out;
        background: #fff;
        &:hover {
            border-color: #3d85b0;
        }
        .version {
            float: right;
        }
    }
}

.ag-container {
    min-width: 960px;
    text-align: center;
    padding: 0 10px;
}
.ag-wrap {
    width: 317px;
    margin-bottom: 15px;
    display: inline-block;
    vertical-align: top;
    &:last-child {
        margin-bottom: 0;
    }
    .header {
        color: #444;
        font-size: 18px;
    }
}
.ag-inner {
    border: solid 1px #eee;
    border-radius: 10px;
    padding: 10px 5px;
    background-color: #f4f4f4;
    &.ag-problem {
        border-color: #990000;
    }
}
.ag-node {
    -moz-transition: border-color .4s ease-in-out;
    -o-transition: border-color .4s ease-in-out;
    -webkit-transition: border-color .4s ease-in-out;
    transition: border-color .4s ease-in-out;
    background: #fff;
    border: solid 1px #eee;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    overflow: hidden;
    cursor: pointer;

    &:hover {
        border-color: #3d85b0;
    }

    .icon {
        vertical-align: sub;
    }

    &.ag-replica {
        width: 250px;
        font-size: 14px;
        margin-left: 38px;
    }

    &.ag-problem {
        border-color: #990000;
        background-color: #fff8f8;
    }
}
.ag-child-wrap {
    display: inline-block;
    float: right;
}
.ag-name {
    color: #444;
    font-size: 16px;
    text-align: center;
}
.ag-node-name {
    float: left;
    color: #444;
    font-size: 12px;
}
.ag-databases {
    float: right;
    .status-down {
        font-weight: normal;
    }
}
.ag-error {
    clear: both;
    padding: 2px;
    margin: 2px 0;
    background-color: #990000;
    color: #fff;
    border-radius: 5px;
}
.ag-db-error {
    clear: both;
    font-size: 12px;
    color: #444;
    padding: 2px 0 2px 15px;
    .status-down {
        font-weight: normal;
    }
}
.ag-transfer {
    clear: both;
    padding: 2px;
}
.ag-queue, .ag-log-volume {
    padding: 2px;
    .label {
        color: #CCC;
    }
}
.ag-poll {
    float: right;
    font-size: 12px;
    color: #ccc;
    vertical-align: bottom;
}
.ag-log-volume {
    border-top: solid 1px #DDD;
    margin-top: 4px;
    padding-top: 4px;
    .volume-space {
        float: right;
    }
}

.sql-plan-detail {
    .category-row th {
        padding: 0;
        > div {
            margin-bottom: 2px;
        }
    }
	table {
		width: 100%;
	}
	tr.section-head-row th {
		font-weight: bold;
		border-bottom: solid 1px #EEE;
        width: 20%;
	}
    .stats-body {
        td.key { 
            width: 80px; 
        }
        tr:last-child td {
            border-bottom: solid 1px #EEE;
            padding-bottom: 4px;
        }
    } 
	th, td { 
		padding: 2px 4px; 
	}
    .handle-link {
        font-weight: normal;
        color: #888;        
        a {
            color: @red;

            .loading {
                display: inline-block;
                width: 24px;
            }
        }
    }
    .sql-query {
        max-width: 100%;
        background-color: #EEE;
        .sql-preview-block {
            overflow: visible;
        }
        .selected-statement {
            border-top: solid 1px #9AB1DC;
            border-bottom: solid 1px #9AB1DC;
            background-color: #EBEEF2;
        }
    }
    .sql-query-details {        
        display: none;
        //overflow: auto;
    }
    .sql-query-plan {
        display: none;
        //overflow: auto;
    }
    .sql-query-text {
        padding: 10px 4px 4px 4px;
    }
	.sql-preview-block {
		font-family: Consolas, Courier New;
		background-color: #EEE;
        overflow: auto;
	}
    .sql-query-header {
        font-weight: bold;
        color: #444;
        padding: 3px 0;
    }
    .sql-statement {
        margin-bottom: 10px;

        &:last-child {
            margin-bottom: 0;
        }
    }
    .sql-query-attributes {
        > div {
            border-bottom: solid 1px #EEE;
            padding: 2px 4px;
            margin: 2px 0;
        }
        .key {
            color: #888;
            width: 150px;
            display: inline-block;
        }
        .value {
            display: inline-block;
        }
    }
    .index-details {
        padding-left: 15px;
        color: #444;
        line-height: 1.5em;
        .columns {
            color: #000;
            font-weight: bold;
        }
    }
    .sql-query-excerpt {
        max-height: 100px;
        overflow: hidden;
        z-index: 1;
    }
    .hide-gradient {
        z-index: 2;
        position: relative;
        height: 50px;
        margin-top: -50px;
        overflow: hidden;
        background: -moz-linear-gradient( bottom, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0) 100% );
        background: -webkit-gradient( linear, bottom, top, color-stop(15%, rgb(255, 255, 255)), color-stop(100%, rgba(255, 255, 255, 0)) );
        background: -webkit-linear-gradient( bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% );
        background: -o-linear-gradient( bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% );
        background: -ms-linear-gradient( bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% );
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03ffffff', endColorstr='#ffffff', GradientType=0 );
        background: linear-gradient( bottom, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0) 100% );
    }
    .show-toggle {
        float: right;
        margin-right: 5px;
        margin-top: 20px;
        text-decoration: none;
    }
}

/* SQL Server Query Plans */
.qp-tt {
    top: 4em;
    left: 2em;
    border: 1px solid black;
    background-color: #FFFFEE;
    padding: 2px;
    position: absolute;
    display: none;
    z-index: 1;
    white-space: normal;
    font-size: 11px;

    &.sql-query-tooltip {
        z-index: 1100;
    }

    div, table {
        font-family: Sans-Serif;
        text-align: left;
    }

    table {
        border-width: 0;
        border-spacing: 0;
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
        white-space: nowrap;
    }

    td, th {
        font-size: 11px;
        border-bottom: solid 1px Black;
        padding: 1px;
    }

    td {
        text-align: right;
        padding-left: 10px;
    }

    th {
        text-align: left;
    }
    .qp-bold {
        font-weight: bold;
    }
    .qp-tt-header
    {
	    text-align: center;
	    font-weight: bold;
    }
}

.sql-query-plan {
    div.qp-node {
	    background-color: #FFFFF4;
	    margin: 2px;
	    padding: 2px;
	    border: 1px solid #CCC;
	    font-size: 11px;
	    line-height: normal;
    }
    .qp-node > div {
	    font-family: Consolas, Monospace;
	    text-align: center;
    }
    div[class|='qp-icon'] {
	    height: 32px;
	    width: 32px;
	    margin-left: auto;
	    margin-right: auto;
	    background-repeat: no-repeat;
    }    
    .qp-bold {
	    font-weight: bold;
    }

    /* Icons */
    .qp-icon-Catchall{background-image:url('img/query-plan/bitmap.gif')}
    .qp-icon-ArithmeticExpression{background-image:url('img/query-plan/arithmetic_expression.gif')}
    .qp-icon-Assert{background-image:url('img/query-plan/assert.gif')}
    .qp-icon-Assign{background-image:url('img/query-plan/assign.gif')}
    .qp-icon-Bitmap{background-image:url('img/query-plan/bitmap.gif')}
    .qp-icon-BookmarkLookup{background-image:url('img/query-plan/bookmark_lookup.gif')}
    .qp-icon-ClusteredIndexDelete{background-image:url('img/query-plan/clustered_index_delete.gif')}
    .qp-icon-ClusteredIndexInsert{background-image:url('img/query-plan/clustered_index_insert.gif')}
    .qp-icon-ClusteredIndexScan{background-image:url('img/query-plan/clustered_index_scan.gif')}
    .qp-icon-ClusteredIndexSeek{background-image:url('img/query-plan/clustered_index_seek.gif')}
    .qp-icon-ClusteredIndexUpdate{background-image:url('img/query-plan/clustered_index_update.gif')}
    .qp-icon-Collapse{background-image:url('img/query-plan/collapse.gif')}
    .qp-icon-ComputeScalar{background-image:url('img/query-plan/compute_scalar.gif')}
    .qp-icon-Concatenation{background-image:url('img/query-plan/concatenation.gif')}
    .qp-icon-ConstantScan{background-image:url('img/query-plan/constant_scan.gif')}
    .qp-icon-Convert{background-image:url('img/query-plan/convert.gif')}
    .qp-icon-CursorCatchall{background-image:url('img/query-plan/bitmap.gif')}
    .qp-icon-Declare{background-image:url('img/query-plan/declare.gif')}
    .qp-icon-Delete{background-image:url('img/query-plan/table_delete.gif')}
    .qp-icon-DistributeStreams{background-image:url('img/query-plan/distribute_streams.gif')}
    .qp-icon-Dynamic{background-image:url('img/query-plan/dynamic.gif')}
    .qp-icon-EagerSpool{background-image:url('img/query-plan/spool.gif')}
    .qp-icon-FetchQuery{background-image:url('img/query-plan/fetch_query.gif')}
    .qp-icon-Filter{background-image:url('img/query-plan/filter.gif')}
    .qp-icon-GatherStreams{background-image:url('img/query-plan/gather_streams.gif')}
    .qp-icon-HashMatch{background-image:url('img/query-plan/hash_match.gif')}
    .qp-icon-HashMatchRoot{background-image:url('img/query-plan/hash_match.gif')}
    .qp-icon-HashMatchTeam{background-image:url('img/query-plan/hash_match.gif')}
    .qp-icon-If{background-image:url('img/query-plan/if.gif')}
    .qp-icon-Insert{background-image:url('img/query-plan/table_insert.gif')}
    .qp-icon-InsertedScan{background-image:url('img/query-plan/inserted_scan.gif')}
    .qp-icon-Intrinsic{background-image:url('img/query-plan/intrinsic.gif')}
    .qp-icon-IteratorCatchall{background-image:url('img/query-plan/bitmap.gif')}
    .qp-icon-Keyset{background-image:url('img/query-plan/keyset.gif')}
    .qp-icon-LanguageElementCatchall{background-image:url('img/query-plan/bitmap.gif')}
    .qp-icon-LazySpool{background-image:url('img/query-plan/spool.gif')}
    .qp-icon-LogRowScan{background-image:url('img/query-plan/log_row_scan.gif')}
    .qp-icon-MergeInterval{background-image:url('img/query-plan/merge_interval.gif')}
    .qp-icon-MergeJoin{background-image:url('img/query-plan/merge_join.gif')}
    .qp-icon-NestedLoops{background-image:url('img/query-plan/nested_loops.gif')}
    .qp-icon-NonclusteredIndexDelete{background-image:url('img/query-plan/nonclustered_index_delete.gif')}
    .qp-icon-NonclusteredIndexInsert{background-image:url('img/query-plan/nonclustered_index_insert.gif')}
    .qp-icon-NonclusteredIndexScan{background-image:url('img/query-plan/nonclustered_index_scan.gif')}
    .qp-icon-IndexSeek{background-image:url('img/query-plan/nonclustered_index_seek.gif')}
    .qp-icon-NonclusteredIndexSpool{background-image:url('img/query-plan/nonclustered_index_spool.gif')}
    .qp-icon-NonclusteredIndexUpdate{background-image:url('img/query-plan/nonclustered_index_update.gif')}
    .qp-icon-OnlineIndexInsert{background-image:url('img/query-plan/online_index_insert.gif')}
    .qp-icon-ParameterTableScan{background-image:url('img/query-plan/parameter_table_scan.gif')}
    .qp-icon-PopulationQuery{background-image:url('img/query-plan/population_query.gif')}
    .qp-icon-RdiLookup{background-image:url('img/query-plan/rdi_lookup.gif')}
    .qp-icon-RefreshQuery{background-image:url('img/query-plan/refresh_query.gif')}
    .qp-icon-RemoteDelete{background-image:url('img/query-plan/remote_delete.gif')}
    .qp-icon-RemoteInsert{background-image:url('img/query-plan/remote_insert.gif')}
    .qp-icon-RemoteQuery{background-image:url('img/query-plan/remote_query.gif')}
    .qp-icon-RemoteScan{background-image:url('img/query-plan/remote_scan.gif')}
    .qp-icon-RemoteUpdate{background-image:url('img/query-plan/remote_update.gif')}
    .qp-icon-RepartitionStreams{background-image:url('img/query-plan/repartition_streams.gif')}
    .qp-icon-Result{background-image:url('img/query-plan/result.gif')}
    .qp-icon-RowCountSpool{background-image:url('img/query-plan/row_count_spool.gif')}
    .qp-icon-Segment{background-image:url('img/query-plan/segment.gif')}
    .qp-icon-Sequence{background-image:url('img/query-plan/sequence.gif')}
    .qp-icon-Sequenceproject{background-image:url('img/query-plan/sequenceproject.gif')}
    .qp-icon-Snapshot{background-image:url('img/query-plan/snapshot.gif')}
    .qp-icon-Sort{background-image:url('img/query-plan/sort.gif')}
    .qp-icon-Split{background-image:url('img/query-plan/split.gif')}
    .qp-icon-Spool{background-image:url('img/query-plan/spool.gif')}
    .qp-icon-Statement{background-image:url('img/query-plan/result.gif')}
    .qp-icon-StreamAggregate{background-image:url('img/query-plan/stream_aggregate.gif')}
    .qp-icon-Switch{background-image:url('img/query-plan/switch.gif')}
    .qp-icon-TableDelete{background-image:url('img/query-plan/table_delete.gif')}
    .qp-icon-TableInsert{background-image:url('img/query-plan/table_insert.gif')}
    .qp-icon-TableScan{background-image:url('img/query-plan/table_scan.gif')}
    .qp-icon-TableSpool{background-image:url('img/query-plan/table_spool.gif')}
    .qp-icon-TableUpdate{background-image:url('img/query-plan/table_update.gif')}
    .qp-icon-TableValuedFunction{background-image:url('img/query-plan/table_valued_function.gif')}
    .qp-icon-Top{background-image:url('img/query-plan/top.gif')}
    .qp-icon-Udx{background-image:url('img/query-plan/udx.gif')}
    .qp-icon-Update{background-image:url('img/query-plan/table_update.gif.gif')}
    .qp-icon-While{background-image:url('img/query-plan/while.gif')}

    .qp-node {
	    position: relative;
	    white-space: nowrap;
    }
    .qp-tr {
	    display: table;
    }
    .qp-tr > div {
	    display: table-cell;
	    padding-left: 15px;
    }
}

.summary-popup {
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
}